<template>
	<view class="content">
		<view class="cu-bar btn-group">
			<button class="cu-btn" @tap="tapGuwen" :class="applyInfo.type=='gw'?'bg-green shadow-blur':'text-green line-green shadow'">置业顾问</button>
			<button class="cu-btn" @tap="tapZhuchang" :class="applyInfo.type!='gw'?'bg-green shadow-blur':'text-green line-green shadow'">渠道驻场</button>
		</view>
		<view class="bg-gray flex flex-row">
			<checkbox class="round blue checked" @tap="checkRule" ></checkbox>
			<navigator class="text-blue" url="/pages/user/notice?name=入驻规则">请仔细阅读成都住哪儿置业顾问入驻规则，勾选视为同意</navigator>
		</view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-xl text-bold">基本信息</text>
			</view>
		</view>
		<form @submit="formSubmit">
			<view class="cu-form-group">
				<view class="title">公司名称</view>
				<input placeholder="请输入公司简称+(类别) 列如 住哪儿(平台)" name="platform" v-model='applyInfo.platform'></input>
			</view>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input placeholder="请输入姓名+(职位)" name="name" v-model='applyInfo.name'></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机</view>
				<input placeholder="请输入手机号" name="tel" v-model='applyInfo.tel'></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">微信</view>
				<input placeholder="请输入微信号,留空则使用手机号" name="wechat" v-model='applyInfo.wechat'></input>
			</view>
			<view class="cu-form-group">
				<view class="title">推荐人手机</view>
				<input placeholder="请输入推荐人手机号" name="ptel" v-model='applyInfo.ptel'></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group" v-if="applyInfo.type=='sale'">
				<view class="title">佣金</view>
				<input placeholder="请输入佣金" name="money" v-model='applyInfo.money'></input>
			</view>

		<!-- 	<view class="cu-form-group">
				<view class="title">类型</view>
				<radio-group style="flex:auto;" @change="RadioChange">
					<radio class="round blue" :class="applyInfo.radio=='新盘'?'checked':''" :checked="applyInfo.radio=='新盘'?true:false"
					 value="新盘"></radio>新盘
					<radio class="round blue" :class="applyInfo.radio=='长信恒新'?'checked':''" :checked="applyInfo.radio=='长信恒新'?true:false"
					 value="长信恒新"></radio>长信恒新
					<radio class="round blue" :class="applyInfo.radio=='成都向上'?'checked':''" :checked="applyInfo.radio=='成都向上'?true:false"
					 value="成都向上"></radio>成都向上
				</radio-group>
			</view> -->

			<view class="cu-form-group">
				<view class="title">入驻楼盘</view>
				<input placeholder="请选择入驻楼盘" @tap="selectHouse" @focus="selectHouse" :value="applyInfo.houseName" name="housename"></input>
			</view>

			<view class="cu-form-group">
				<view class="grid col-3 grid-square flex-sub">

					<view class="bg-img" @tap="ViewImage" :data-url="applyInfo.avatarImg" v-if="applyInfo.avatarImg!=''">
						<image :src="applyInfo.avatarImg" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" data-name="avatarImg">
							<text class='cuIcon-close'></text>

						</view>
					</view>
					<view class="solids flex center" @tap="ChooseImage" v-if="applyInfo.avatarImg==''" data-name="avatarImg">
						<text class='cuIcon-cameraadd'></text>
						<text class="image-lebel">上传头像</text>
					</view>

					<view class="bg-img" @tap="ViewImage" :data-url="applyInfo.codeImg" v-if="applyInfo.codeImg!=''">
						<image :src="applyInfo.codeImg" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" data-name="codeImg">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids flex" @tap="ChooseImage" v-if="applyInfo.codeImg==''" data-name="codeImg">
						<text class='cuIcon-cameraadd'></text>
						<text class="image-lebel">上传微信二维码</text>
					</view>

					<view class="bg-img" @tap="ViewImage" :data-url="applyInfo.gpImg" v-if="applyInfo.gpImg!=''">
						<image :src="applyInfo.gpImg" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" data-name="gpImg">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids flex" @tap="ChooseImage" v-if="applyInfo.gpImg==''" data-name="gpImg">
						<text class='cuIcon-cameraadd'></text>
						<text class="image-lebel">上传工牌或名片</text>
					</view>

				</view>

			</view>
		</form>
		<view style="height:60px;"> </view>
		<view class="bottom" @tap="sumbmit">申请入驻</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isChecked:false,
				user:{},
				applyInfo: {
					type: 'gw',
					tel:'',
					name:'',
					wechat:'',
					platform:'',
					avatarImg: '',
					avatar: '',
					codeImg: '',
					code: '',
					gpImg: '',
					gp: '',
					houseId: '',
					houseName: '',
					memberId:0,
				}
			};
		},
		onLoad(e){
			this.type=e.type;
			uni.removeStorage({
				key:"selectedHouse"
			});
			uni.getStorage({
				key: 'UserInfo',
				success: (res)=>{
					if(!res.data){
						uni.showModal({
							content: '请先登陆!',
							showCancel: false
						});
						uni.navigateBack({
						}) ;
					}
					this.applyInfo.memberId=res.data.id;
					//this.user = res.data;
				},
				fail:(e)=>{
					uni.showModal({
						content: '请先登陆!',
						showCancel: false,
						success:function(){
							uni.navigateBack({
							}) ;
						}
					});
				}
			});
		},
		onShow(){
			var me=this;
			uni.getStorage({
				key: 'selectedHouse',
				success: function(res) {
					console.log(res);
					me.applyInfo.houseId = res.data.Id;
					me.applyInfo.houseName = res.data.Name
				}
			});
		},
		methods: {
			checkRule(e){
				this.isChecked=!this.isChecked;
			},
			tapGuwen() {
				this.applyInfo.type = 'gw';
			},
			tapZhuchang() {
				this.applyInfo.type= 'sale';
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			ChooseImage(e) {
				var me=this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: me.$rootUrl + '/Attachment/Create',
							filePath: res.tempFilePaths[0],
							name: 'File',
							formData: {
								OssId: me.Id,
								Type: "销售",
							},
							success(res1) {
								var data = JSON.parse(res1.data);
								if (data.succuess == true) {
									if (e.currentTarget.dataset.name == "avatarImg") {
										me.applyInfo.avatar = data.url;
									} else if (e.currentTarget.dataset.name == "codeImg") {
										me.applyInfo.code = data.url;
									} else {
										me.applyInfo.gp = data.url
									}
								}

							}
						});
						if (e.currentTarget.dataset.name == "avatarImg") {
							me.applyInfo.avatarImg = res.tempFilePaths[0];
						} else if (e.currentTarget.dataset.name == "codeImg") {
							me.applyInfo.codeImg = res.tempFilePaths[0];
						} else {
							me.applyInfo.gpImg = res.tempFilePaths[0]
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: [e.currentTarget.dataset.url],
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张照片？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {

							if (e.currentTarget.dataset.name == "avatarImg") {
								this.applyInfo.avatarImg = "";
								this.applyInfo.avatar = "";
							} else if (e.currentTarget.dataset.name == "codeImg") {
								this.applyInfo.codeImg = "";
								this.applyInfo.code = "";
							} else {
								this.applyInfo.gpImg = ""
								this.applyInfo.gp = "";
							}
						}
					}
				})
			},
			selectHouse() {
				uni.navigateTo({
					url: '/pages/ruzhu/select'
				})
			},
			sumbmit(){
				var me=this;
				if(!me.isChecked)
				{
					uni.showToast({
						icon:'none',
						title:"请先同意住哪儿入驻规则！"
					})
					return;
				}
				if(me.applyInfo.name=="")
				{
					uni.showToast({
						icon:'none',
						title:"姓名不能为空！"
					})
					return;
				}
				if(me.applyInfo.platform=="")
				{
					uni.showToast({
						icon:'none',
						title:"公司不能为空！"
					})
					return;
				}
				if(me.applyInfo.tel=="")
				{
					uni.showToast({
						icon:'none',
						title:"手机不能为空！"
					})
					return;
				}
				if(me.applyInfo.houseId=="")
				{
					uni.showToast({
						icon:'none',
						title:"入驻楼盘不能为空！"
					})
					return;
				}
				if(me.applyInfo.avatar=="")
				{
					uni.showToast({
						icon:'none',
						title:"头像不能为空！"
					})
					return;
				}
				uni.request({
					url: me.$rootUrl + '/Saler/WxCreate',
					data: me.applyInfo,
					method: 'POST',
					success(res) {
						if (res.data.success) {
							uni.showModal({
								content: '提交成功!',
								showCancel: false
							});
							uni.navigateBack({
							})
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.content {
		.bottom {
			position: fixed;
			bottom: 0;
			background-color: #D1372C;
			padding: 8px 0;
			width: 100%;
			font-size: 35upx;
			text-align: center;
			color: white;
		}
	}

	.image-lebel {
		margin: 0 auto;
	}
</style>
